<template>
	<view class="content">
		<view class="player-content">
			<!-- #ifdef MP-WEIXIN -->
			<live-player id="livePlayer" class="live-player"
				catchtouchmove :src="sourceUrl"  :autoplay="true"
				bindstatechange="statechange" binderror="error" @click="handleControlbar">
				<view class="player-tool" :style="{bottom:(showControlbar?'0':'-60rpx')}">
					<view class="tools">
						<view class="full-screen" @tap.stop="handleFullScreen()">
							<text class="iconfont icon-fangda" v-if="!fullScreenFlag"></text>
							<text class="iconfont icon-suoxiao" v-else></text>
						</view>
					</view>
				</view>
			</live-player>
			<!-- #endif -->
		</view>
	</view>
</template>
<script>
	import { hikPreview } from '@/api/Hik.js'
	export default {
		data() {
			return {
				sourceUrl: '', //播放路径
				showControlbar: true,
				timer:null,
				fullScreenFlag:false
			}
			},
			watch: {
			showControlbar(val, oldVal) {
				if(val){
					this.timer = setTimeout(()=>{
						this.showControlbar = false
						},5000)
				 }else{
					 clearTimeout(this.timer);
					 }
				}
			},
			onLoad(e) {
			// #ifdef MP-WEIXIN
			this.playerCtx = uni.createLivePlayerContext('livePlayer');
			// #endif
			if(e.indexCode){
				this.getLiveList(e.indexCode)  //视频流列表//自定义控制栏自动隐藏的实现
				setTimeout(()=>{
					this.showControlbar = false
					}
				 ,10000)
				 setTimeout(()=>{
				 	this.handleFullScreen();
				 	}
				  ,2000)
			}
			
			
			},
			created() {
			
			
			},
			methods: {
				handleControlbar() {
					this.showControlbar = !this.showControlbar
				},
				getLiveList(e) {
					hikPreview({"cameraIndexCode": e,"protocol":'rtmp'}).then(
						res => {
							if (res.data.code=='0') {
								this.sourceUrl = res.data.data;
							}else{
								this.$api.showTip(res.data.msg)
							}
						},
						err => {
							this.$api.showTip('服务器错误')
						}
					);
				},
				statechange(e){
				    console.log('live-player code:', e.detail.code)
				 },
				 error(e){
				 	console.error('live-player error:', e.detail.errMsg)
				 },
				
					//全屏功能的实现
					handleFullScreen() {
					var that = this 
					if (!that.fullScreenFlag) {
						//全屏
						that.playerCtx.requestFullScreen({
							success: res => {
								that.fullScreenFlag = true ;
							},
							fail: res => {
								console.log('fullscreen fail');
							},direction: 90,
							});
					} else {//缩小
						that.playerCtx.exitFullScreen({
							success: res => {
							that.fullScreenFlag = false;
							},
							fail: res => {
								console.log('exit fullscreen success');
							}
						});
					
					}
				},
			}}
</script>
<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;

		.player-content {
			position: relative;
			width: 100%;
			height: 450rpx;
			display: flex;
			background-size: 100% 100%;

			.live-player {
				width: 100%;
				height: 100%;
				position: relative;
			}
		}
	}

	//播放器弹出工具
	.player-tool {
		width: 100%;
		height: 60rpx;
		background-image: linear-gradient(0deg, rgba(0, 0, 0, .6), transparent);
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: absolute;
		left: 0;
		padding: 0 45rpx;
		transition: all 0.3s;
		.tools {
			height: 100%;
			width: auto;
			display: flex;
			align-items: center;
			.full-screen {
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				.iconfont {
					color: #fff;
					font-weight: bold;
					}
				}
					.cruise {
						display: flex;
						align-items: center;
						justify-content: center;
						margin-left: 25rpx;
						.iconfont {
							color: #E45A3E;
							font-size: 45rpx;
							      }
						    }
				}
			}
</style>